<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.css" />
    <link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css" />
    <link rel="stylesheet" href="css/register.css" />
    <style type="text/css">
      .text{
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
	  .ht-radio{display:inline-flex;line-height: normal;}
	  .ht-radio label{width: auto;}.ht-radio input[type=radio]{top:6px;}
    </style>
	</head>
	<body>
    <header class="mui-bar mui-bar-nav">
    	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    	<h1 class="mui-title">外来人员注册</h1>
    </header>
    <div class="mui-content" id="registerW">
      <div class="mui-input-group" style="min-height:calc(100vh - 44px)">
        <div class="mui-input-row">
          <label>姓名</label>
          <input type="text" class="mui-input-clear" placeholder="请输入姓名" maxlength="45" v-model="form.compellation">
        </div>
        <div class="mui-input-row">
          <label>性别</label>
		  <!--
		  <span class="mui-input-clear gongzhong" @click="sexPicker()">{{form.sex==''?'请选择性别':form.sex=='1'?'男':'女'}}</span>
		  -->
		  <div class="mui-input-clear" style="display: flex;justify-content: flex-end;">
			  <div class="ht-radio mui-radio">
				<label>男</label>
				<input name="radio1" type="radio" v-model="form.sex" value="1">
			  </div>
			  <div class="ht-radio mui-radio">&nbsp;</div>
			  <div class="ht-radio mui-radio">
				<label>女</label>
				<input name="radio1" type="radio" v-model="form.sex" value="2">
			  </div>
		  </div>
		</div>
        <div class="mui-input-row">
          <label>身份证号</label>
          <input type="text" class="mui-input-clear" placeholder="请输入身份证号码" maxlength="45" v-model="form.idCard">
        </div>
        <div class="mui-input-row">
        	<label>所属单位</label>
        	<span class="mui-input-clear gongzhong" id="quyu" @click="chooseQuyu()" style="height: 50px;"> <span class="text">{{form.enterpriseName!=''?form.enterpriseName:'请选择所属单位'}}</span></span>
        	<!--<input type="text" class="mui-input-clear" placeholder="">-->
        </div>
        <div class="mui-input-row">
        	<label>所属项目</label>
        	<span class="mui-input-clear gongzhong" @click="chooseP()" style="height: 50px;"><span class="text">{{form.currentProjectName!=''?form.currentProjectName:'请选择所属项目'}}</span></span>
        	<!--<input type="text" class="mui-input-clear" placeholder="请选择风场">-->
        </div>
        <div class="mui-input-row">
          <label>手机号</label>
          <input type="text" class="mui-input-clear" placeholder="请输入手机号" maxlength="45" v-model="form.phone">
        </div>
        <div class="mui-input-row">
        	<label>密码</label>
        	<input type="text" class="mui-input-clear" placeholder="请输入密码" id="pwd" v-model="form.password">
        </div>
        <div class="mui-input-row">
        	<label>确认密码</label>
        	<input type="text" class="mui-input-clear" placeholder="请再次输入密码" id="confirmPwd" v-model="form.confirmPwd">
        </div>
        <span class="register" @click="next()">下一步</span>
      </div>
    </div>
  </body>
  <script src="../../js/mui.min.js"></script>
  <script src="../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../js/jquery-3.2.1.min.js"></script>
  <script src="../neom/js/mkeyplus.base.js"></script>
  <script src="../../js/common.js"></script>
  <script type="text/javascript" src="../../js/vue.js"></script>
  <script type="text/javascript">
    var registerWPage = null;
    var picker = new mui.PopPicker();
    mui.init();
    registerWPage = new Vue({
      el: '#registerW',
      data: {
        form:{
          compellation:'',//姓名
          idCard:'',//身份证号
          enterpriseId:'',//单位ID
          enterpriseName:'',//单位名称
          currentProject:'',//项目ID
          currentProjectName:'',//项目名称
          phone:'',//手机号
          password:'',//密码
          confirmPwd:'',
          sex:''
        }
        
      },
      created: function() {},
      methods: {
        next() {
          var _this=this
          if(_this.form.compellation==''){
              mui.toast('请输入姓名');
              return false;
          }
          if(_this.form.idCard==''){
              mui.toast('请输入身份证号');
              return false;
          }
          if(!checkIDCard(_this.form.idCard)){
              mui.toast('请输入正确的身份证号');
              return false;
          }
          if(_this.form.enterpriseId==''){
              mui.toast('请选择所属单位');
              return false;
          }
          if(_this.form.currentProject==''){
              mui.toast('请选择所属项目');
              return false;
          } 
          var isPhone=false
          if (!(/^1[3456789]\d{9}$/.test(_this.form.phone))) {
            isPhone=true
          }
          if(isPhone){
             mui.toast('请输入正确的手机号');
             return false; 
          }
          if (this.form.password.trim().length <= 6 || this.form.password.trim().length >= 18) {
              mui.toast('请设置6至18位登录密码');
              return false;
          }
          var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,18}$/;
          if(!reg.test(this.form.password)){
              mui.toast('密码必须包含大写字母，小写字母和数字');
              return false;
          }
          if (this.form.password != this.form.confirmPwd) {
              mui.toast('新密码与确认密码不一致');
              return false;
          }
          mui.openWindow({
            url: './registerWNext.html',
            id: 'registerWNext.html',
            extras: {
              form: JSON.stringify(this.form)
            }
          });
        },
        sexPicker(){
          var that=this; 
          picker.setData([{
          		value: '1',
          		text: '男'
          	},
          	{
          		value: '2',
          		text: '女'
          	},
          ]);
          picker.show(function(selectItems) {
            that.form.sex=picker.getSelectedItems(selectItems)[0].value;
          });
        },
        chooseQuyu(){
          var that=this;
          mui.baseWApp.httpRequst('/enterprise/list', {},
          	function(data) {
              console.log(JSON.stringify(data.data))
          		if(data.code == '0') {
                var Data = new Array();
          			$.each(data.data, function(i, v) {
          				var temp = {
          					value: v.id,
          					text: v.enterpriseName
          				}
          				Data.push(temp);
          			});
                picker.setData(Data);
                picker.show(function(selectItems) {
                  that.form.enterpriseName=picker.getSelectedItems(selectItems)[0].text;
                  that.form.enterpriseId=picker.getSelectedItems(selectItems)[0].value;
                  that.form.currentProjectName='';
                  that.form.currentProject='';
                });
          		} else if(data.status == "500") {
          			console.log('获取区域信息失败!')
          		}
          	},
          	function() {
          		console.log("获取区域信息失败");
          		//					mui.toast("获取区域信息失败！！！");
          	});
        },
        chooseP(){
          var that=this
          if(that.form.enterpriseId==''){
            mui.toast('请选择所属单位')
            return
          }
          mui.baseWApp.httpRequst('/project/queryList?enterpriseId='+that.form.enterpriseId, {},
          	function(data) {
              
          		if(data.code == '0') {
                if(data.data.length===0){
                  mui.toast('此项目下没有项目，请重新选择')
                  return false
                }
                var Data = new Array();
          			$.each(data.data, function(i, v) {
          				var temp = {
          					value: v.id,
          					text: v.projectName
          				}
          				Data.push(temp);
          			});
                picker.setData(Data);
                picker.show(function(selectItems) {
                  that.form.currentProjectName=picker.getSelectedItems(selectItems)[0].text;
                  that.form.currentProject=picker.getSelectedItems(selectItems)[0].value;
                });
          		} else {
          			mui.toast(data.msg)
          		}
          	},
          	function() {
          		console.log("获取区域信息失败");
          		//					mui.toast("获取区域信息失败！！！");
          	});
        }
        
      }
    })
    //身份证号验证
    function checkIDCard(idcode){
        // 加权因子
        console.log(idcode)
        var weight_factor = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
        // 校验码
        var check_code = ['1', '0', 'X' , '9', '8', '7', '6', '5', '4', '3', '2'];
    
        var code = idcode + "";
        var last = idcode[17];//最后一位
    
        var seventeen = code.substring(0,17);
    
        // ISO 7064:1983.MOD 11-2
        // 判断最后一位校验码是否正确
        var arr = seventeen.split("");
        var len = arr.length;
        var num = 0;
        for(var i = 0; i < len; i++){
            num = num + arr[i] * weight_factor[i];
        }
        
        // 获取余数
        var resisue = num%11;
        var last_no = check_code[resisue];
    
        // 格式的正则
        // 正则思路
        /*
        第一位不可能是0
        第二位到第六位可以是0-9
        第七位到第十位是年份，所以七八位为19或者20
        十一位和十二位是月份，这两位是01-12之间的数值
        十三位和十四位是日期，是从01-31之间的数值
        十五，十六，十七都是数字0-9
        十八位可能是数字0-9，也可能是X
        */
        var idcard_patter = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
    
        // 判断格式是否正确
        var format = idcard_patter.test(idcode);
        console.log(last === last_no)
        console.log(format)
        // 返回验证结果，校验码和格式同时正确才算是合法的身份证号码
        return last === last_no && format ? true : false;
    }
  </script>
  
</html>
